<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>管家名片-编辑</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/gate_sentry.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />

    <style>
        .picbox {
            position: relative;
            width: 100%;
        }

        .erweima {
            width: 100px;
            height: 100px;
            position: absolute;
            right: 2px;
            bottom: 2px;
        }

        .aui-content {
            background: #fff;
            padding-bottom: 1rem;
        }

        .aui_formbox {
            padding: 20px 0px 5px 0px;
            width: 90%;
            margin: 0 auto;
        }

        textarea::placeholder {
            color: #ddd;
            font-size:0.8rem;
        }
        /* 新增图片 */

        .img_plusbox {
            width: 3.5rem;
            height: 3.5rem;
            margin: 0 auto;
            background: #fff;
            text-align: center;
            border-radius: 6px;
            padding-top: 0.3rem;
            box-shadow: 0px 1px 6px 0px rgb(60 128 209 / 1%);
            margin-bottom:10px;
        }
            .img_plusbox img {
                width: 40px;
                margin: 0 auto;
                height: 40px;
                margin-top: 15%;
            }

            .img_plusbox .iconfont {
                font-size: 2rem;
                color: #bbb;
            }

        .imgbox {
            width: 100%;
            overflow: hidden;
        }

        .imgitem {
            width: 100%;
            height: 100%;
        }

        .imgitemcontent {
            width: 100%;
            position: relative;
            height: 245px;
        }

        .QRimgitemcontent {
            width: 6rem;
            height: 6rem;
            margin: 0 auto;
            position: relative;
        }

        .QRimgitem {
            width: 6rem;
            height: 6rem;
            overflow: hidden;
        }

        .reuploadimg {
            position: absolute;
            top: 40%;
            right: 40%;
            width: 80px;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            border-radius: 10rem;
            background: #f9f9f9;
            color: #666;
            font-size: 0.6rem;
            z-index: 99;
        }
        .new-span-date {
            width:auto;
            text-align: left;
            font-size: 0.8rem;
             padding-left: 0px;
        }
        .ptb10 {
            padding:10px 0;
        }
        .aui_formcontent {
            line-height:unset;
        }
        .textColorPlaceholder {
            color:#ddd;
        }
        .mb5 {
            margin-bottom:5rem;
        }
        .numberV {
            position:absolute;
            right:0;
            top:0;
        }

    </style>
</head>

<body>
    <div id="app" v-cloak>

        <div class="picbox">
            <!-- 上传图片 -->
            <div class="imglist_box ptb10">
                <div v-if="form.ImagePath!=''" class="imgitemcontent">
                    <img class="imgitem" v-bind:src="form.ImagePath" />
                    <div v-on:click="choose_picture(1)" class="reuploadimg">重新上传</div>
                </div>
                <div v-if="form.ImagePath==''" class="imglist_item" style="text-align: center;">
                    <div class="img_plusbox">
                        <img v-on:click="choose_picture(1)" src="../image/photo_image.svg" />
                        <!--<i v-on:click="choose_picture(1)" class="icon iconfont icon-addApp"></i>-->
                    </div>
                    请上传您的个人形象照
                </div>
            </div>
            <!-- 上传二维码 -->
            <div class="imglist_box ptb10" >
                <div v-if="form.QRCodeImgPath!=''" class="QRimgitemcontent">
                    <img class="QRimgitem" v-bind:src="form.QRCodeImgPath" />
                    <div v-on:click="choose_picture(2)" class="reuploadimg" style="right: 15%;">重新上传</div>
                </div>
                <div v-if="form.QRCodeImgPath==''" class="imglist_item" style="text-align: center;">
                    <div class="img_plusbox">
                        <img v-on:click="choose_picture(2)" src="../image/photo_image.svg" />
                        <!--<i v-on:click="choose_picture(2)" class="icon iconfont icon-addApp"></i>-->
                    </div>
                    请上传二维码
                </div>
            </div>
            <!-- <div class="erweima"><img src='../image/erwema.jpg'></div>
            <img src='../image/demo_msg_icon.jpg'> -->
        </div>
        <div class="aui-content aui-margin-b-15" style="margin:10px 0px 80px 0px;">
            <div class="aui_formbox edit">
                <div class="aui_formitem ">
                    <div class="aui_formtitle col-star">
                        姓名
                    </div>
                    <div class="aui_formcontent">
                        <input type="text" placeholder="请填写姓名" v-model="form.Name">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle col-star">
                        联系电话
                    </div>
                    <div class="aui_formcontent">
                        <input type="number" placeholder="请填手机号码" v-model="form.PhoneNumber">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle col-star">
                        工作时间
                    </div>
                    <div class="aui_formcontent">
                        <span class="choose new-span-date" id="startdate" data-options='{"type":"time"}' v-bind:class="{'textColorPlaceholder':startTime==''}">{{startTime==''?'开始时间':startTime}}</span>
                        <!--<input type="text" placeholder="请选择" v-on:click='do_start_time()' readonly="readonly" v-model="startTime" style="width: 80px; float: left;">-->
                        <span class="ccc" style="padding:0 10px;">至</span>
                        <!--<input type="text" placeholder="请选择" v-on:click='do_end_time()' readonly="readonly" v-model="endTime" style="width: 100px; float: right;">-->
                        <span class="choose new-span-date" id="enddate" data-options='{"type":"time"}' v-bind:class="{'textColorPlaceholder':endTime==''}">{{endTime==''?'结束时间':endTime}}</span>
                    </div>
                </div>
                <div class="aui_formitem " style="background-image: none;">
                    <div class="aui_formtitle">
                        个人简介
                    </div>
                    <div class="aui_formcontent">
                        <textarea placeholder="请填写个人简介" @input="checkStrLengths" style="height: 5.2rem; margin-top: 14px;width:82%;" v-model="form.Desc" ></textarea>
                        <span class="numberV">{{txtVal}}/50</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-content mb5" style="padding-bottom:0;" >
            <div class="aui_formbox" style="padding:10px 0px">
                <div class="aui_formitem" style="border-bottom: none;">
                    <div class="aui_formtitle">
                        身份绑定
                    </div>
                    <div class="aui_formcontent">
                        {{UserName}}
                    </div>
                </div>
            </div>
        </div>
        <div class="aui_bottom">
            <div v-on:click="do_save()" class="aui_bottombtn">保存</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="js/guanjiaCar_edit.js"></script>


</html>
